⚡ 30 秒速记

• 核心判断：前端路由的本质是监听地址变化、匹配路由表，再驱动视图切换而不请求整页文档
• 原理主线：围绕 「一、React Router基础之his」、「二、react-router的基本原理」、「核心机制」 建立输入、状态变化与输出之间的因果关系
• 文章范围：深入解析React Router的原理，包括history的实现方式、不同环境下的路由管理、location对象的结构与作用，帮助前端开发者全面理解React Router的底层机制与SEO优化相关知识。
• 边界与代价：hash 与 history 的事件和服务端回退要求不同，鉴权、懒加载与滚动恢复属于路由之上的工程能力
• 工程落地：选型时同时验证首屏直达、前进后退、刷新回源、动态参数和未匹配路由

React Router 的本质是监听地址变化、匹配路由规则，再驱动组件树更新，而不是重新请求整页文档。 hash 模式通过 hashchange 感知变化，history 模式依赖 pushState、replaceState 和 popstate，内存模式则自行维护记录。用户点击 Link 时，默认跳转会被拦截，新的 location 经过路由匹配后触发视图重渲染。选择模式时要考虑运行环境，并把文章中的旧组件和生命周期写法视为历史实现。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

一、React Router基础之history

1.1 History介绍

history是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类

• 老浏览器的history: 主要通过hash来实现，对应createHashHistory
• 高版本浏览器: 通过html5里面的history，对应createBrowserHistory
• node环境下: 主要存储在memeory里面，对应createMemoryHistory

上面针对不同的环境提供了三个API，但是三个API有一些共性的操作，将其抽象了一个公共的文件createHistory